<template>
  <div class="body-div">
    <div style="position: absolute;left: 1px">
      <img src="../assets/12.jpg" width="1689" height="899">
    </div>
    <div class="login-div">
      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
      >
        <div>
          <h2 style="text-align: center;margin-bottom: 10px;
                color: black;">民安助手管理端</h2>
        </div>
        <el-form-item label="手机号：" prop="phone">
          <el-input v-model="ruleForm.phone"/>
        </el-form-item>
        <el-form-item label="验证码：" prop="code">
          <el-input v-model="ruleForm.code"/>
        </el-form-item>
        <div class="admin-code" @click="sendCaptcha()">
          <p>{{codeText}}</p>
        </div>
       <div style="display: flex;justify-content: center;align-items: center;">
         <el-form-item>
           <el-button type="primary" @click="submitForm(ruleFormRef)">
             登录
           </el-button>
           <el-button @click="resetForm(ruleFormRef)">重置</el-button>
         </el-form-item>
       </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>


import {ref} from "vue";
import {loginJs, sendCaptchaJs, userInfoJs} from "../api/user/user.js";
import router from "../router/index.js";
import {ElMessage} from "element-plus";
import {useUserStore} from "../store/userStore.js";

const ruleFormRef = ref()
const ruleForm = ref({
  phone: null,
  code: null
})

// 获取验证码
var codeText = ref("点击获取验证码")
function sendCaptcha(){
  sendCaptchaJs().then(res=>{
    if(res.data.code == 200) {
      codeText.value = res.data.data
    }
  })
}


const rules = ref({
  username: [
    {required: true, message: '用户名不能为空', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '验证码不能为空', trigger: 'blur'},
  ],
})

// 创建pinia实例
const userStore = useUserStore()

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loginJs(ruleForm.value).then(res=>{
        if(res.data.code == 200){
          console.log(res.data)
          localStorage.setItem("token",res.data.data)
          ElMessage.success("登录成功")
          // 存储在pinia仓库
          userInfoJs().then(res=>{
            if(res.data.code == 200){
              userStore.setUserInfos(res.data.data)
              router.push("/index")
            }
          })
        }else{
          ElMessage.error(res.data.errorMessage)
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}




</script>


<style>
*{
  padding: 0px;
  margin: 0px;
}
.body-div{
  display: flex;
  height: 99.6vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: azure;
  position: relative;
}

.login-div{
  position: absolute;
  width: 400px;
  height: 270px;
  background-color: rgba(255, 255, 255, 0.3); /* 半透明背景 */
  border-radius: 15px;
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px); /* Safari 支持 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  color: white;
}
.admin-code{
  border: 1px solid black;
  width: 125px;
  height: 35px;
  right: 10px;
  position: absolute;
  color: black;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
  font-style: italic;
  background: white;
}
</style>